<template lang="html">
  <div class="wxHistoryBox" @click="updateType=false" >
    <p>{{productName}}</p>
    <p class="gray">上架时间 {{startSoldTime}}</p>
    <el-row style="margin-top:10px;" v-loading.body="loading">
      <el-col class="left" :span="4">
        <p :class="activeIndex==index?'green':''" v-for="(item,index) in skuList" @click="skuMove(item.id,index)">{{item.name}}</p>
      </el-col>
      <el-col class="right" :span="20">
        <div class="calendar">
          <div class="head">
            <div class="prev green" @click="prev(currentYear,currentMonth)"><</div>
            <div class="txt">{{ currentYear }}-{{currentMonth}}</div>
            <div class="next green" @click="next(currentYear,currentMonth)">></div>
            <div class="blank"></div>
            <div class="last green"><img class="icon" src="static/img/ic_check_1.png">已预约</div>
            <div class="last green"><img class="icon" src="static/img/ic_check_3.png">库存</div>
          </div>
          <div style="margin-top:10px;">
            <div class="week">一</div>
            <div class="week">二</div>
            <div class="week">三</div>
            <div class="week">四</div>
            <div class="week">五</div>
            <div class="week">六</div>
            <div class="week">日</div>
          </div>
          <ul class="body">
            <li v-for="dayobject in days" >
             <!--本月-->
             <!--如果不是本月  改变类名加灰色-->
             <div v-if="dayobject.day.getMonth()+1 != currentMonth"   class="other-month gray" style="height:100%; font-size:20px;">
               {{ dayobject.day.getDate() }}
             </div>
             <div v-else-if="dayobject.day.getTime() < new Date().getTime()"   class="other-month gray" style="height:100%; font-size:20px;">
               {{ dayobject.day.getDate() }}
             </div>
             <div v-else-if="dayobject.day.getTime()<skuList[activeIndex].aDate||skuList[activeIndex].bDate+9*60*60*1000<dayobject.day.getTime()">
               <div style="height:100%; font-size:20px;" class="gray">
                 {{ dayobject.day.getDate()}}
               </div>
             </div>

             <div v-else style="height:100%;" @click.stop="pick($event,dayobject.day,dayobject.all)">
                 <div style="font-size:20px;">
                   {{ dayobject.day.getDate() }}
                 </div>
                 <div class="list" style="background:#FEE3FF;" v-for="list in dayobject.record"><span>{{list.title.replace("场",'')}}:{{list.count}}</span></div>
                 <div class="list" v-if="typeof(list.isOpen)=='number'&&list.isOpen==0"  v-for="list in dayobject.all"><span>{{list.title.replace("场",'')}}:{{list.isOpen==0?'关闭':'开启'}}</span></div>
                 <div class="list" v-else ><span>{{list.title.replace("场",'')}}:{{list.count}}</span></div>
             </div>
            </li>
            <div v-show="updateType" class="updateBox" ref="updateBox" @click.stop="">
              <p>修改预约总名额</p>
              <p v-if="activeArr.length>=1">
                <span>{{activeArr[0].title}}：</span>
                <span style="display:inline-block; width:60px;">
                  <el-select v-model="add1" size="mini">
                    <el-option
                      v-for="item in options2"
                      :key="item.num"
                      :label="item.name"
                      :value="item.num">
                    </el-option>
                  </el-select>
                </span>
                <span style="display:inline-block; width:60px; margin-left:5px;">
                  <el-input v-model="count1" size="mini" ></el-input>
                </span>

              </p>
              <!-- <p v-if="activeArr.length>=1&&isOpen">
                <span>{{activeArr[0].title}}：</span>
                <span style="display:inline-block; width:80px;">
                  <el-select v-model="count1" size="mini" placeholder="请选择">
                    <el-option
                      v-for="item in options2"
                      :key="item.num"
                      :label="item.name"
                      :value="item.num">
                    </el-option>
                  </el-select>
                </span>
              </p> -->
              <p v-if="activeArr.length>=2">
                <span>{{activeArr[1].title}}：</span>
                <span style="display:inline-block; width:60px;">
                  <el-select v-model="add2" size="mini">
                    <el-option
                      v-for="item in options2"
                      :key="item.num"
                      :label="item.name"
                      :value="item.num">
                    </el-option>
                  </el-select>
                </span>
                <span style="display:inline-block; width:60px; margin-left:5px;">
                  <el-input v-model="count2" size="mini" ></el-input>
                </span>
              </p>
              <!-- <p v-if="activeArr.length>=2&&isOpen">
                <span>{{activeArr[1].title}}：</span>
                <span style="display:inline-block; width:80px;">
                  <el-select v-model="add2" size="mini" placeholder="请选择">
                    <el-option
                      v-for="item in options2"
                      :key="item.num"
                      :label="item.name"
                      :value="item.num">
                    </el-option>
                  </el-select>
                </span>
              </p> -->
              <p v-if="activeArr.length>=3">
                <span>{{activeArr[2].title}}：</span>
                <span style="display:inline-block; width:60px;">
                  <el-select v-model="add3" size="mini">
                    <el-option
                      v-for="item in options2"
                      :key="item.num"
                      :label="item.name"
                      :value="item.num">
                    </el-option>
                  </el-select>
                </span>
                <span style="display:inline-block; width:60px; margin-left:5px;">
                  <el-input v-model="count3" size="mini" ></el-input>
                </span>
              </p>
              <p class="text-right">
                <el-button style="margin-right:5px;" type="success" size="mini" @click="sub">保存</el-button>
              </p>
            </div>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios"
var url;

export default {
  data(){
    return {
      skuList:[],
      skuId:1,
      id:0,
      productName:'',
      startSoldTime:'',
      activeIndex:0,
      loading:false,
      days:[],
      activeDay:{
        day:0,
        month:0,
        year:0,
        week:''
      },
      first:true,
      updateType:false,
      add1:'',
      add2:'',
      add3:'',
      count1:'',
      count2:'',
      count3:'',
      isOpen:false,
      activeId:0,
      activeArr:[],
      options2:[{'name':'开启','num':1},{'name':'关闭','num':0}]
    }
  },
  methods:{
    sub:function (){
      this.loading=true;
      var isOpen='';
      for(let i=0;i<this.activeArr.length;i++){
        if(i==0){
          var count=this.count1;
          var isOpen=this.add1;
        }else if(i==1){
          var count=this.count2;
          var isOpen=this.add2;
        }else if(i==2){
          var count=this.count3;
          var isOpen=this.add3;
        }
        axios.get(url+'/v1/orders/post/reservation/totalStock',{
          params:{
            reservationId:this.activeArr[i].id,
            count:count,
            isOpen:isOpen
          }
        }).then((res)=>{
          this.getAll(this.skuList[this.activeIndex].id);
        }).catch((err)=>{
          console.log(err);
        })
      }
      this.updateType=false;
    },
    skuMove:function (id,n){
      this.activeIndex=n;
      //console.log(id);
      this.id=id;
      this.getAll(id);
    },
    //日历初始化
    initData: function(cur) {
      var leftcount=0; //存放剩余数量
      var date;
      if (cur) {
          date = new Date(cur);
      } else {
          var now=new Date();
          var d = new Date(this.formatDate(now.getFullYear() , now.getMonth() , 1));
          d.setDate(35);
          date = new Date(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
      }
      this.currentDay = date.getDate();
      this.currentYear = date.getFullYear();
      this.currentMonth = date.getMonth() + 1;

      this.currentWeek = date.getDay(); // 1...6,0
      if (this.currentWeek == 0) {
          this.currentWeek = 7;
      }
      var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
      this.days.length = 0;
      // 今天是周日，放在第一行第7个位置，前面6个
      //初始化本周
      for (var i = this.currentWeek - 1; i >= 0; i--) {
          var d = new Date(str);
          d.setDate(d.getDate() - i);
          var dayobject={}; //用一个对象包装Date对象  以便为以后预定功能添加属性
          dayobject.day=d;
          this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
      }
      //其他周
      for (var i = 1; i <= 36 - this.currentWeek; i++) {
          var d = new Date(str);
          d.setDate(d.getDate() + i);
          var dayobject={};
          dayobject.day=d;
          this.days.push(dayobject);
      }
      this.getAll();
    },
    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function(year,month,day){
         var y = year;
         var m = month;
         if(m<10) m = "0" + m;
         var d = day;
         if(d<10) d = "0" + d;
         return y+"-"+m+"-"+d
     },
     prev: function(year, month) {
        // setDate(0); 上月最后一天
        // setDate(-1); 上月倒数第二天
        // setDate(dx) 参数dx为 上月最后一天的前后dx天
        console.log(year , month , 1);
        var d = new Date(this.formatDate(year , month , 1));
        d.setDate(0);
        this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
        this.getMessage();
     },
     next: function(year, month) {
         var d = new Date(this.formatDate(year , month , 1));
         d.setDate(35);
         this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));

         this.getMessage();
     },
     pick:function (event,dayTime,all){
       if((typeof all[0].isOpen)=='number'){
         this.isOpen=true;
       }else{
         this.isOpen=false;
       }
       if(all.length==1){
        this.add1=all[0].isOpen;
        this.count1=all[0].count;
       }else if(all.length==2){
        this.add1=all[0].isOpen;
        this.count1=all[0].count;
        this.add2=all[1].isOpen;
        this.count2=all[1].count;
       }else if(all.length==3){
        this.add1=all[0].isOpen;
        this.count1=all[0].count;
        this.add2=all[1].isOpen;
        this.count2=all[1].count;
        this.add3=all[2].isOpen;
        this.count3=all[2].count;
       }
        this.activeArr=all;
       if(event.currentTarget.offsetLeft>676){
          this.$refs.updateBox.style.left=666+'px';
       }else {
         this.$refs.updateBox.style.left=60+event.currentTarget.offsetLeft+'px';
       }
       if(event.currentTarget.offsetTop>320){
         this.$refs.updateBox.style.top=320+'px'
       }else{
         this.$refs.updateBox.style.top=10+event.currentTarget.offsetTop+'px';
       }
       this.updateType=true;
     },
     getMessage:function (){
       axios.get(url+'/v1/product/get/sku',{
         params:{
           productId:this.$store.state.TanProduct.id
         }
       }).then((res)=>{
         var data=res.data.data.skuList;
          this.productName=res.data.data.productName;
          this.startSoldTime=res.data.data.startSoldTime;
          this.skuId=res.data.data.skuList[0].id;

          for(let i in data){
            //有效期转换
            if(data[i].periodDate.indexOf("-")!=-1){
              var dateArr = data[i].periodDate.split('-');
              //开始日期
              var month1 = parseInt(dateArr[0].split('月')[0]);
              var day1 = parseInt(dateArr[0].split('月')[1].replace('日',''));
              var year1=new Date().getFullYear();
              var ymd1=year1+"/"+month1+"/"+day1;
              data[i].aDate=Date.parse(new Date(ymd1));
              //结束日期
              var month2 = parseInt(dateArr[1].split('月')[0]);
              var day2 = parseInt(dateArr[1].split('月')[1].replace('日',''));
              var year2=new Date().getFullYear();
              var ymd2=year2+"/"+month2+"/"+day2;
              data[i].bDate=Date.parse(new Date(ymd2));
            }else{
              var month1 = parseInt(data[i].periodDate.split('月')[0]);
              var day1 = parseInt(data[i].periodDate.split('月')[1].replace('日',''));
              var year1=new Date().getFullYear();
              var ymd1=year1+"/"+month1+"/"+day1;
              data[i].aDate=Date.parse(new Date(ymd1));
              data[i].bDate=Date.parse(new Date(ymd1));
            }
          }
          this.skuList=data;
          if(this.first){
            console.log(data[0].id+"zzz");
            this.first=false;
            this.id=data[0].id;
            this.getAll(data[0].id);
          }else{
            this.getAll();
          }
       }).catch((err)=>{
        console.log(err);
       })
     },
     getRecord:function (){
       var that = this;
       axios.get(url+'/v1/orders/get/reservation/record',{
         params:{
           productId:this.$store.state.TanProduct.id,
           skuId:this.id
         }
       }).then((res)=>{
         for(let i in this.days){
           for(let k in res.data.data){
             if(this.days[i].day.getTime()-8*60*60*1000==res.data.data[k].startTime){
               for(let j=0;j<this.days[i].record.length;j++){
                 if(this.days[i].record[j].title==res.data.data[k].title){
                   let json={};
                   json.title=res.data.data[k].title;
                   json.count=res.data.data[k].count;
                   that.days[i].record[j]=json
                   console.log(that.days[i].record[j].count);
                   that.$set(this.days, 0, this.days[0]);
                 }
               }
             }
           }
         }

         this.loading=false;
       }).catch((err)=>{
         console.log(err);
         this.loading=false;
       })

     },
     getAll:function (id){
       var that = this;
       //console.log(id);
       if(id==null){
         id=this.id;
       }
       console.log(id);
       this.loading=true;
       axios.get(url+'/v1/orders/get/reservation/all',{
         params:{
           productId:this.$store.state.TanProduct.id,
           skuId:id
         }
       }).then((res)=>{
         for(let i in this.days){
           this.days[i].all=[];
           this.days[i].record=[];
           for(let k =0;k<res.data.data.length;k++){
             if(this.days[i].day.getTime()-8*60*60*1000==res.data.data[k].startTime){
               let json={};
               json.title=res.data.data[k].title;
               json.count=res.data.data[k].count;
               json.id=res.data.data[k].id;
               json.isOpen=res.data.data[k].isOpen;
               this.days[i].all.push(json);
               let json2={
                 'title':res.data.data[k].title,
                 'count':0};
               this.days[i].record.push(json2);
               this.$set(this.days, 0, this.days[0]);
             }
           }
         }
         this.getRecord();
       }).catch((err)=>{
         console.log(err);
         this.loading=false;
       })
     }
  },
  computed:{
    getId(){
      return this.$store.state.TanProduct.id;
    }
  },
  watch:{
    getId(val){
      this.first=true;
      this.initData(null);
      this.getMessage();
    }
  },
  created(){
    url = this.$store.state.url;
    this.initData(null);
    this.getMessage();

  }
}
</script>

<style media="screen">
.wxHistoryBox .el-input__icon+.el-input__inner{padding-right: 5px; padding-left: 4px;}
</style>

<style lang="Sass" scoped>
.wxHistoryBox{
  p{text-align: left; font-size: 12px;}
  .left{border: 1px solid #ddd; border-radius: 4px; padding: 10px; min-height: 500px; margin-top: 20px;
    p{font-size: 12px; border-bottom: 1px solid #ccc; text-align: justify; padding: 10px 0; cursor: pointer;}
  }
  .right{ padding: 0 10px; box-sizing: border-box; margin-top: 20px;
    .calendar{
      .head{display: flex;
        div{display: inline-block; line-height: 18px;}
        .prev{flex:0 0 50px; cursor: pointer; text-align: left;}
        .txt{flex:0 0 100px; font-size: 18px;}
        .next{flex:0 0 50px; cursor: pointer; text-align: right;}
        .blank{flex:1;}
        .last{flex:0 0 100px;}
      }
      .week{float: left; width: 14.28%; text-align: left; padding-bottom: 10px;}
      .body{list-style: none; width: 100%; border-left: 1px solid #ddd; position: relative;
        border-top: 1px solid #ddd;  overflow: hidden;
        li{float: left; text-align: left; width: 14.28%; height: 100px;  padding: 5px;
           box-sizing: border-box; border-right:1px solid #ddd; border-bottom: 1px solid #ddd;
           .list { background: #D6EEFF; width: 50%; float: left; margin-bottom: 2px;}
         }
         .updateBox{position: absolute; left: 100; top: 10; border: 1px solid #ccc; width: 200px; height: 150px;
            background: #fff; z-index: 9; padding: 5px; box-sizing: border-box; border-radius: 5px;
            span{font-size: 8px;}
            p{margin: 5px 0;}
          }
      }
    }
  }
  .icon{width: 20px; display: inline-block; vertical-align: top; margin-right: 5px;}
}
</style>
